﻿@model r4u.data.access.layer.VACANCY
@{
    bool enable = true;
    var quota = 0;

    using (var context = new r4u.data.access.layer.r4uEntities())
    {
        quota = context.VACANCY_APPLICANT.Count(x => x.vacancy_id.Equals(Model.vacancy_id));
    }
}

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>@Model.vacancy_for</title></head>
<body>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <style type="text/css">
        /* uses font awesome for social icons */
        @@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);

        .page-header
        {
            text-align: center;
        }

        /*social buttons*/
        .btn-social
        {
            color: white;
            opacity: 0.9;
        }

            .btn-social:hover
            {
                color: white;
                opacity: 1;
            }

        .btn-facebook
        {
            background-color: #3b5998;
            opacity: 0.9;
        }

        .btn-twitter
        {
            background-color: #00aced;
            opacity: 0.9;
        }

        .btn-linkedin
        {
            background-color: #0e76a8;
            opacity: 0.9;
        }

        .btn-github
        {
            background-color: #000000;
            opacity: 0.9;
        }

        .btn-google
        {
            background-color: #c32f10;
            opacity: 0.9;
        }

        .btn-stackoverflow
        {
            background-color: #D38B28;
            opacity: 0.9;
        }

        /* resume stuff */

        .bs-callout
        {
            -moz-border-bottom-colors: none;
            -moz-border-left-colors: none;
            -moz-border-right-colors: none;
            -moz-border-top-colors: none;
            border-color: #eee;
            border-image: none;
            border-radius: 3px;
            border-style: solid;
            border-width: 1px 1px 1px 5px;
            margin-bottom: 5px;
            padding: 20px;
        }

            .bs-callout:last-child
            {
                margin-bottom: 0px;
            }

            .bs-callout h4
            {
                margin-bottom: 10px;
                margin-top: 0;
            }

        .bs-callout-danger
        {
            border-left-color: #d9534f;
        }

            .bs-callout-danger h4
            {
                color: #d9534f;
            }

        .resume .list-group-item:first-child, .resume .list-group-item:last-child
        {
            border-radius: 0;
        }

        /*makes an anchor inactive(not clickable)*/
        .inactive-link
        {
            pointer-events: none;
            cursor: default;
        }

        .resume-heading .social-btns
        {
            margin-top: 15px;
        }

            .resume-heading .social-btns i.fa
            {
                margin-left: -5px;
            }

        @@media (max-width: 992px)
        {
            .resume-heading .social-btn-holder
            {
                padding: 5px;
            }
        }


        /* skill meter in resume. copy pasted from http://bootsnipp.com/snippets/featured/progress-bar-meter */

        .progress-bar
        {
            text-align: left;
            white-space: nowrap;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
        }

            .progress-bar > .progress-type
            {
                padding-left: 10px;
            }

        .progress-meter
        {
            min-height: 15px;
            border-bottom: 2px solid rgb(160, 160, 160);
            margin-bottom: 15px;
        }

            .progress-meter > .meter
            {
                position: relative;
                float: left;
                min-height: 15px;
                border-width: 0px;
                border-style: solid;
                border-color: rgb(160, 160, 160);
            }

            .progress-meter > .meter-left
            {
                border-left-width: 2px;
            }

            .progress-meter > .meter-right
            {
                float: right;
                border-right-width: 2px;
            }

                .progress-meter > .meter-right:last-child
                {
                    border-left-width: 2px;
                }

            .progress-meter > .meter > .meter-text
            {
                position: absolute;
                display: inline-block;
                bottom: -20px;
                width: 100%;
                font-weight: 700;
                font-size: 0.85em;
                color: rgb(160, 160, 160);
                text-align: left;
            }

            .progress-meter > .meter.meter-right > .meter-text
            {
                text-align: right;
            }
    </style>

    <div class="container">

        @{
            if (DateTime.Now < Model.valid_from)
            {
                enable = false;
            <div class="row info" style="text-align: center;">
                <div class="col-xs-12 alert alert-danger">
                    <strong>Job vacancy has not yet been activated. Please try after @Model.valid_from</strong>
                </div>
            </div>
            }

            else if (DateTime.Now > Model.valid_to)
            {
                enable = false;
            <div class="row info" style="text-align: center;">
                <div class="col-xs-12 alert alert-danger">
                    <strong>Sorry, the vacancy has been expired.</strong>
                </div>
            </div>
            }

            else if (Model.max_applications == quota)
            {
                enable = false;
            <div class="row info" style="text-align: center;">
                <div class="col-xs-12 alert alert-danger">
                    <strong>Sorry, the vacancy quota has been exceeded.</strong>
                </div>
            </div>
            }
        }


        <div class="resume">
            <header class="page-header">
                <h1 class="page-title">Vacancy for @Model.vacancy_for</h1>
            </header>
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-offset-1 col-md-10 col-lg-offset-2 col-lg-8">
                    <div class="panel panel-default">
                        <div class="panel-heading resume-heading">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="col-xs-12 col-sm-4">
                                        <figure>
                                            <img class="img-circle img-responsive" alt="" src="~/img/jobs.png">
                                        </figure>


                                        <div class="col-xs-12 social-btns">

                                            <div class="col-xs-3 col-md-1 col-lg-1 social-btn-holder">
                                                <a href="https://plus.google.com/share?url=@Request.Url.ToString()" class="btn btn-social btn-block btn-google">
                                                    <i class="fa fa-google"></i></a>
                                            </div>

                                            <div class="col-xs-3 col-md-1 col-lg-1 social-btn-holder">
                                                <a href="https://www.facebook.com/sharer/sharer.php?u=@Request.Url.ToString()" class="btn btn-social btn-block btn-facebook">
                                                    <i class="fa fa-facebook"></i></a>
                                            </div>

                                            <div class="col-xs-3 col-md-1 col-lg-1 social-btn-holder">
                                                <a href="https://twitter.com/intent/tweet?source=@Request.Url.ToString()" class="btn btn-social btn-block btn-twitter">
                                                    <i class="fa fa-twitter"></i></a>
                                            </div>

                                            <div class="col-xs-3 col-md-1 col-lg-1 social-btn-holder">
                                                <a href="https://www.linkedin.com/shareArticle?mini=true&url=@Request.Url.ToString()" class="btn btn-social btn-block btn-linkedin">
                                                    <i class="fa fa-linkedin"></i></a>
                                            </div>

                                        </div>


                                    </div>

                                    <div class="col-xs-12 col-sm-8">
                                        <ul class="list-group">
                                            <li class="list-group-item">@Model.vacancy_for</li>
                                            <li class="list-group-item">@Model.CUSTOMER_ACCOUNT.company_name</li>
                                            <li class="list-group-item"><i class="fa fa-phone"></i>@Model.CUSTOMER_ACCOUNT.phone</li>
                                            <li class="list-group-item"><i class="fa fa-envelope"></i>@Model.CUSTOMER_ACCOUNT.email</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="bs-callout bs-callout-danger">
                            <h4>Job Description</h4>
                            <p>
                                @Model.description
                            </p>
                        </div>

                        <div class="bs-callout bs-callout-danger">
                            <h4>Eligibility Criteria</h4>
                            <ul class="list-group">
                                @{
                                    if (!string.IsNullOrEmpty(Model.education_level))
                                    {
                                    <li class="list-group-item"><strong>Education Level: </strong>@Model.education_level</li>
                                    }

                                    if (!string.IsNullOrEmpty(Model.location_of_applicant))
                                    {
                                        using (var context = new r4u.data.access.layer.r4uEntities())
                                        {
                                            var country = context.COUNTRies.FirstOrDefault(c => c.country_id.Equals(Model.location_of_applicant));
                                     
                                    <li class="list-group-item"><strong>Location of Applicant: </strong>@country.country_name</li>   
                                        }
                                    }


                                    if (Model.experience_from.HasValue || Model.experience_to.HasValue)
                                    {
                                    <li class="list-group-item"><strong>Experience Level: </strong>@Model.experience_from - @Model.experience_to years</li>   
                                    }

                                    if (Model.age_from.HasValue || Model.age_to.HasValue)
                                    {
                                    <li class="list-group-item"><strong>Age Level: </strong>@Model.age_from - @Model.age_to years</li>   
                                    }


                                    if (Model.max_applications.HasValue)
                                    {
                                    <li class="list-group-item"><strong>Maximum number of Applicants: </strong>@Model.max_applications</li>   
                                    }
                                
                                }
                            </ul>
                        </div>


                        <div class="bs-callout bs-callout-danger">
                            <h4>Expected Skills</h4>
                            <ul class="list-group">
                                <a class="list-group-item inactive-link" href="#">

                                    @{
                                
                                        foreach (var skill in Model.VACANCY_SKILL)
                                        {
                                            string progress_color = string.IsNullOrEmpty(skill.optional) || skill.optional.Equals("N") ? "success" : "warning";
                                            string percent = string.IsNullOrEmpty(skill.optional) || skill.optional.Equals("N") ? "100" : "50";
                                            string optional = string.IsNullOrEmpty(skill.optional) || skill.optional.Equals("N") ? "" : "(Optional)";
                                        
                                        <div class="progress">
                                            <div data-placement="top" style="width: @percent%;"
                                            aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" role="progressbar" class="progress-bar progress-bar-@progress_color">
                                                <span class="sr-only">100%</span>
                                                <span class="progress-type">@skill.skill_id @optional</span>
                                            </div>
                                        </div>
                                        }
                                    }

                                </a>

                            </ul>
                            <div class="bs-callout">
                                <h4>How to Apply</h4>
                                <p>
                                    You can apply for this vacancy by clicking "Apply Now" button below. And you should share your LinkedIn profile data with us in order to apply for this.
                                </p>
                            </div>
                            <p style="text-align: right">
                                @if (enable)
                                { 
                                   <a href="https://www.linkedin.com/uas/oauth2/authorization?response_type=code&client_id=75nj2lib6zdk57&scope=r_fullprofile%20r_emailaddress%20r_network&state=DCEEFWFwqe53sdffef424&redirect_uri=http://localhost:49542/Applied?vacancy_id=@Model.vacancy_id"><button id="post" name="post" class="btn btn-primary" type="submit">Apply Now</button></a>
                                }
                            </p>

                        </div>
                    </div>

                </div>
            </div>

        </div>

    </div>
</body>
</html>
